<template>
  <div class="Mine">
    <Head msg="个人中心" backimg="1"></Head>
    <div v-if="!user" class="mine-head-nologin">
      <div class="mine-head-welcome">欢迎来到车源网</div>
      <div class="mine-head-notice">登陆后获得更多高级权限··· ···</div>
      <div class="mine-head-btn" @click="register">注册</div>
    </div>
    <div v-if="user" class="mine-head">
      <div class="mine-head-left">
        <img
          class="mine-left-pic"
          :src="
            user.avatar
              ? user.avatar
              : user.gender == 2
              ? publicPath + 'img/icons/icon-head-girl.png'
              : publicPath + 'img/icons/icon-head-boy.png'
          "
        />
        <form name="form" id="form" method="post" enctype="multipart/form-data">
          <input
            type="file"
            name="upload"
            id="upload"
            style="display: none;"
            @change="uploadFile($event)"
            multiple="multiple"
          />
          <input
            class="mine-left-btn"
            type="button"
            value="修改头像"
            onclick="document.form.upload.click()"
          />
        </form>
      </div>
      <div class="mine-right">
        <div>
          <div class="mine-right-name">用户昵称：{{ user.nickname }}</div>
          <div class="mine-name-btn" @click="nameupdate">修改昵称</div>
        </div>
        <div>
          <div>用户ID号：{{ user.id }}</div>
          <!--                    <div v-if="user.bind_mobile==1" class="mine-name-btn" @click="bindMobile">关联账号</div>-->
        </div>
        <div>
          <div>
            账号属性：<span
              @click="toRespect"
              v-if="user.is_dealer"
              class="mine-property"
              >新车经销商<img
                src="../../public/img/icons/icon-bottom.png"
                style="position: relative;top:2px;width: 12px;height: 12px;margin-left: 5px"/></span

            ><span v-if="!user.is_dealer" style="font-weight: bold"
              >注册会员</span
            >
          </div>

          <div class="mine-property-btn" @click="cardealer">
            {{
              typevalue === ''
                ? '企业认证'
                : typevalue == 0
                ? '审核中'
                : typevalue == 1
                ? '取消认证'
                : typevalue == 2
                ? '认证失败'
                : '企业认证'
            }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="!user" class="mine-body-nologin">
      <div class="mine-body-state">
        您当前状态：<span class="mine-body-status">普通游客</span>
      </div>
      <div class="mine-body-btn" @click="login">账号登录</div>
      <div class="mine-login-style">
        <div
          class="mine-login-list"
          style="margin-right: 8vw"
          @click="toQzoneLogin"
        >
          <img
            class="mine-login-pic"
            src="../../public/img/icons/icon-qq.png"
          />
          <div class="mine-login-title">qq登录</div>
        </div>
        <div class="mine-login-list" @click="towxlogin">
          <img
            class="mine-login-pic"
            src="../../public/img/icons/icon-wx.png"
          />
          <div class="mine-login-title">微信登录</div>
        </div>
      </div>
    </div>
    <div v-if="user" class="mine-body">
      <div class="mine-icon">
        <div class="mine-icon-list" @click="tocollect">
          <img
            class="mine-icon-pic"
            src="../../public/img/icons/icon-collect.png"
          />
          <div class="mine-icon-title">我的收藏</div>
        </div>
        <div class="mine-icon-list" @click="tohistory">
          <img
            class="mine-icon-pic"
            src="../../public/img/icons/icon-read.png"
          />
          <div class="mine-icon-title">阅读记录</div>
        </div>
        <div class="mine-icon-list" @click="toletter">
          <img
            class="mine-icon-pic"
            src="../../public/img/icons/icon-inform.png"
          />
          <div v-if="user.letter_unread != 0" class="mine-icon-letter">
            {{ user.letter_unread }}
          </div>
          <div class="mine-icon-title">系统通知</div>
        </div>
      </div>
      <div class="mine-order" @click="toorder">
        <img
          class="mine-order-pic"
          src="../../public/img/icons/icon-order.png"
        />
        <div class="mine-order-title">我的预约</div>
      </div>
      <div class="mine-order" @click="toarticle">
        <img
          class="mine-order-pic"
          src="../../public/img/icons/icon-article.png"
        />
        <div class="mine-order-title">我的文章</div>
      </div>
      <div class="mine-order" @click="tomycar">
        <img class="mine-order-pic" src="../../public/img/icons/icon-car.png" />
        <div class="mine-order-title">我的车源</div>
      </div>
    </div>
    <div v-if="user" class="mine-exit" @click="exit">
      退出账号
    </div>
    <a
      style="display: block;text-align: center;color:#4876ff;font-size: 15px;margin-top: 5vh"
      href="http://www.beian.miit.gov.cn"
      >闽ICP备19018053号-2</a
    >
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';

@Component({
  components: {
    Head,
  },
})
export default class Mine extends Sence {
  private publicPath: any = process.env.BASE_URL;
  public user: any = false; // 用户信息
  public typetitle: any = '企业认证'; // 当前认证状态文字
  public typevalue: any = ''; // 当前认证值

  // 生命周期函数
  public mounted() {
    if (this.$route.query.token) {
      const user: any = { token: this.$route.query.token };
      localStorage.setItem('user', JSON.stringify(user));
    }
    this.user = this.getuser();
    if (this.user) {
      if (this.user.apply) {
        this.typevalue = this.user.apply.auth_status;
      }
      this.freshuser().then((res: any) => {
        this.user = res;
        if (this.user.apply) {
          const status: number = this.user.apply.auth_status;
          this.typevalue = status;
          // switch (status) {
          //     case 0:this.typetitle='审核中';break;
          //     case 1:this.typetitle='取消认证';break;
          //     case 2:this.typetitle='认证失败';break;
          //     case 3:this.typetitle='企业认证';break;
          // }
        } else {
          this.typevalue = '';
          this.typetitle = '企业认证';
        }
      });
    }
  }

  // 去登录
  login(): void {
    this.$router.push('/login');
  }

  // 退出登录
  public exit(): void {
    localStorage.removeItem('user');
    localStorage.removeItem('token');
    this.user = false;
  }

  // 去注册
  public register(): void {
    this.$router.push('/register');
  }

  // 修改昵称
  public nameupdate(): void {
    const that = this;
    (<any>this)
      .$createDialog({
        type: 'prompt',
        title: '昵称修改',
        prompt: {
          value: this.user.nickname,
          placeholder: '请输入昵称',
        },
        onConfirm: (e: any, promptValue: any) => {
          that
            .post('api/v1/updateProfile', {
              nickname: promptValue,
            })
            .then((res: any) => {
              that.user.nickname = promptValue;
              that.toast('修改成功');
            });
          // (<any>this).$createToast({
          //     type: 'correct',
          //     time: 1000,
          //     txt: `Prompt value: ${promptValue || ''}`
          // }).show()
        },
      })
      .show();
  }

  // 修改属性
  public cardealer(): void {
    if (this.typevalue === '' || this.typevalue == 3) {
      this.$router.push('/cardealer');
    } else if (this.typevalue == 2) {
      (<any>this)
        .$createDialog({
          type: 'confirm',
          icon: 'cubeic-alert',
          title: '认证失败',
          content: this.user.apply.reason + '，点击确认重新认证。',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;',
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;',
          },
          onConfirm: () => {
            this.$router.push('/cardealer');
          },
          onCancel: () => {},
        })
        .show();
    } else if (this.typevalue == 1) {
      (<any>this)
        .$createDialog({
          type: 'confirm',
          icon: 'cubeic-alert',
          title: '提示',
          content: '确定取消认证？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;',
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;',
          },
          onConfirm: () => {
            this.unAuthDealer();
          },
          onCancel: () => {},
        })
        .show();
    }
  }

  // 文件上传
  public uploadFile(event: any) {
    const that = this;
    // console.log(event);
    // console.log(event.target.files[0]) ; //获取input的图片file值
    let param = new FormData(); // 创建form对象
    param.append('image', event.target.files[0]); //对应后台接收图片名
    that
      .post('api/v1/uploadImg', param)
      .then((res: any) => {
        that.user.avatar = res.data.name;
        return that.post('api/v1/updateProfile', { avatar: res.data.name });
      })
      .then((res: any) => {
        that.toast('修改成功');
      });
  }

  // 取消认证
  public unAuthDealer(): void {
    this.post('api/v1/unAuthDealer', {}).then((res: any) => {
      this.toast('成功取消认证！');
      this.freshuser().then((res: any) => {
        this.user = res;
        this.typevalue = res.apply.auth_status;
      });
    });
  }

  // 前往我的文章
  public toarticle(): void {
    if (this.user.is_dealer) {
      (<any>this).$router.push('/article');
    } else {
      this.goToDealer();
    }
  }

  // 前往我的收藏
  public tocollect(): void {
    this.$router.push('/collect');
  }

  // 前往阅读记录
  public tohistory(): void {
    this.$router.push('/history');
  }

  // 前往系统通知
  public toletter(): void {
    this.$router.push('/letter');
  }

  // 前往我的车源
  public tomycar(): void {
    if (this.user.is_dealer) {
      this.$router.push('/mycar');
    } else {
      this.goToDealer();
    }
  }

  // QQ登录
  public toQzoneLogin(): void {
    const that = this;
    var childWindow: any;
    childWindow = window.open(
      that.apiurl + 'qqLogin',
      'TencentLogin',
      'width=450,height=320,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1'
    );
  }

  // 微信登录
  public towxlogin(): void {
    let ua: any = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      location.href = this.apiurl + 'wxLogin';
    } else {
      this.toast('请在微信内打开！', 'warn');
    }
  }

  // 关联账号
  public bindMobile(): void {
    this.$router.push('/bindmobile');
  }

  // 我的预约
  public toorder(): void {
    if (!this.user.is_dealer) {
      this.$router.push('/order');
    } else {
      (<any>this)
        .$createActionSheet({
          title: '',
          data: [
            {
              content: '买车预约',
              value: 'buy',
            },
            {
              content: '卖车预约',
              value: 'sell',
            },
          ],
          onSelect: (item: any, index: number) => {
            switch (item.value) {
              case 'buy':
                this.$router.push('/order');
                break;
              case 'sell':
                this.$router.push('/order?sell=true');
                break;
            }
          },
        })
        .show();
    }
  }

  /**
   * 前往信誉管理
   */
  public toRespect(): void {
    this.$router.push('/respect');
  }
}
</script>
<style scoped lang="stylus">
input[type='button']
    -webkit-appearance: none
    margin-top 8px
    width 18vw
    text-align center
    padding 2px 0 3px 0
    background #ff6347
    color white
    font-weight bold
    border-radius 1px

*
    font-size 13px
    box-sizing border-box

.mine-icon-letter
    position absolute
    top 5px
    right 5px
    background red
    color white
    border-radius 100px
    height 20px
    width 20px
    text-align center
    line-height 22px
    font-weight bold
    font-size: 14px

.mine-head-nologin
    padding 13px
    width 100vw
    background #4876ff

    .mine-head-welcome
        text-align left
        font-size 18px
        font-weight bold
        color white

    .mine-head-notice
        text-align left
        margin-top 13px
        font-weight bold
        color white

    .mine-head-btn
        margin auto
        margin-top 13px
        border 1px solid white
        color white
        width 30vw
        font-weight bold
        padding 8px 0
        font-size 15px


.mine-head
    background #4876ff
    padding 13px
    display flex
    flex-direction row

    .mine-head-left
        display flex
        flex-direction column

        .mine-left-pic
            border-radius 18vw
            width 18vw
            height 18vw
            background white

        .mine-left-btn
            margin-top 8px
            width 18vw
            text-align center
            padding 2px 0 3px 0
            background #ff6347
            color white
            font-weight bold
            border-radius 1px

    .mine-right
        width calc(100vw - 18vw - 39px)
        margin-left 13px
        display flex
        flex-direction column
        justify-content space-around

        > div
            height 30px
            display flex
            flex-direction row
            justify-content space-between
            align-items center

            > div
                color white
                font-weight bold
        .mine-right-name
            height 14px
            line-height 14px
            text-align left
            width 50vw
            overflow hidden
            white-space: nowrap;
            text-overflow: ellipsis;


        .mine-property
            font-weight bold
            text-shadow 0px 0px 0px #ff6347, 1px 1px 0px #ff6347, -1px -1px 0px #ff6347, -2px -2px 0px #ff6347, 2px 2px 0px #ff6347

        .mine-name-btn
        .mine-property-btn
            width 18vw
            text-align center
            padding 5px 0
            background #ff6347


.mine-body-nologin
    display flex
    flex-direction column

    .mine-body-state
        padding 10px
        padding-bottom 20vh
        border-bottom 3px solid #eee
        text-align left
        font-size 15px
        font-weight bold

        .mine-body-status
            color: #ffa500
            font-size 15px
            font-weight bold

    .mine-body-btn
        margin auto
        margin-top 20px
        background red
        color white
        width 30vw
        font-weight bold
        padding 8px 0
        font-size 15px

    .mine-login-style
        margin-top 22px
        display flex
        flex-direction row
        justify-content center

        .mine-login-list
            display flex
            flex-direction column
            align-items center

            .mine-login-pic
                width 25px
                height 25px

            .mine-login-title
                margin-top 5px
                color #b5b5b5
                font-weight bold
                font-size 15px


.mine-body
    display flex
    flex-direction column

    .mine-icon
        padding 20px 0
        display flex
        flex-direction row
        justify-content space-around
        border-bottom 1px solid #767978

        .mine-icon-list
            position relative
            display flex
            flex-direction column
            align-items center

            .mine-icon-pic
                width 10vw
                height 10vw

            .mine-icon-title
                margin-top 8px
                font-weight bold

    .mine-order
        padding 15px 8vw
        display flex
        flex-direction row
        align-items center
        border-bottom 1px solid #767978


        .mine-order-pic
            width 10vw
            height 10vw

        .mine-order-title
            margin-left 30px
            font-weight bold
            font-size 15px

.mine-exit
    margin auto
    margin-top 5vh
    background red
    color white
    width 30vw
    font-weight bold
    padding 8px 0
    font-size 15px
</style>
